<template>
  <div class="detail-wrap">
    <common-back :content="detailTitle"></common-back>
    <van-loading class="v-loading"
                 size="30px"
                 color="white"
                 v-show="loading" />
    <common-scroll class="scroll"
                   ref="scroll"
                   v-if="swiperList.length">
      <div class="scroll-content">
        <detail-swiper :loadImg="loadDataed"
                       :list="swiperList"></detail-swiper>
        <div class="product-info">
          <div class="title">{{info.goods_name}}</div>
          <div class="price">
            <div class="on-sale"><span>￥</span>{{info.goods_price}}</div>
            <div class="origin-price">￥<span>{{info.line_price}}</span></div>
          </div>
        </div>
        <div class="product-detail">
          商品详情
        </div>
        <div class="product-content">{{info.goods_desc}}</div>

      </div>
    </common-scroll>
    <div class="bot"
         border-top-1px>
      <div class="collect"
           @click="handleCollect"
           :class="{ redCollect : isCollect}">
        <i class="iconfont icon-shoucang"></i>
        <p>收藏</p>
      </div>
      <div class="add"
           @click="handleAddShop">
        <i class="iconfont icon-gouwuche"></i>
        <p>加入购物车</p>
      </div>
      <div class="settle"
           @click="handleSettle">立即购买</div>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
import CommonScroll from 'common/scroll/scroll'
import CommonBack from 'common/headerBack/back'
import DetailSwiper from './components/swiper'
export default {
  name: 'Detail',
  components: {
    CommonScroll,
    CommonBack,
    DetailSwiper
  },
  data () {
    return {
      detailTitle: '产品详情',
      swiperList: [],
      info: {},
      isCollect: false, // 未收藏
      collectList: [], // 收藏列表
      loading: true
    }
  },
  methods: {
    loadDataed () {
      if (!this.checkLoaded) {
        this.$refs.scroll.refresh()
        this.checkLoaded = true
      }
    },
    getInfo () {
      const id = this.$route.params.id
      this.$api.detail.info({ id })
        .then(this.getInfoSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    getInfoSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.info = data.goods
        this.swiperList = data.goods.goods_images
        this.collect()
      }
    },
    handleSettle () {
      const id = this.$route.params.id
      this.$router.push({
        path: `/detail/${id}/settle`
      })
    },
    // 获取收藏列表
    collect () {
      this.$api.common.collect()
        .then(this.collectSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    collectSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.collectList = data.collectios
        this.loading = false
      }
    },
    // 切换收藏状态
    handleCollect () {
      this.isCollect = !this.isCollect
      this.addOrDeleteCollect()
    },
    // 添加或删除收藏
    addOrDeleteCollect () {
      const id = this.info.goods_id
      this.$api.detail.collect({ goods_id: id })
        .then(this.addOrDeleteCollectSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    addOrDeleteCollectSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        this.$tip(res.msg, 1000)
      }
    },
    // 添加进购物车
    handleAddShop () {
      this.addShop()
    },
    addShop () {
      const id = this.info.goods_id
      this.$api.detail.add({ goods_id: id })
        .then(this.addShoptSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    addShoptSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        this.$tip(res.msg, 1000)
      }
    }
  },
  created () {
    this.listenScroll = true
    this.getInfo()
  },
  watch: {
    collectList (list) {
      this.isCollect = list.some((item) => {
        return this.info.goods_id === item.goods_id
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.detail-wrap
  touch-action none

.scroll
  top 88px
  bottom 98px

  .product-info
    width 100%
    padding()
    padding-top 30px
    padding-bottom 30px

    .title, .on-sale
      font-size $shop_name
      font-weight 400
      color $detail_title
      line-height 34px
      margin-bottom 24px

    .price
      display flex

      .on-sale
        color $tab_active
        margin-right 22px
        span
        font-size 12px

      .origin-price
        font-size $common_fz
        color #939393
        text-decoration line-through

  .product-detail
    width 750px
    height 81px
    background $space
    text-indent 22px
    font-size $address
    font-weight 500
    color $detail_title
    line-height 81px

  .product-content
    padding()
    padding-top 20px
    padding-bottom 20px
    min-height 353px
    width 100%
    background-color $common_bgc
    font-size $address
    color $footer_bgc
    line-height 40px

.bot
  display flex
  align-items center
  position fixed
  bottom 0
  left 0
  width 100%
  height 97px

  .collect, .add
    flex 1
    height 100%
    display flex
    justify-content center
    align-items center
    font-size $address
    color $detail_title

    i
      font-size $address
      margin-right 10px
      color #b8b8b8

  .add
    &:active
      background rgba(255, 87, 34, 0.3)

    p
      font-size $address
      font-weight 400
      color $detail_title

  .settle
    width 251px
    height 97px
    background $tab_active
    text-align center
    line-height 97px
    font-size $shop_name
    font-weight 400
    color $common_bgc

  .redCollect
    i
      color $tab_active

.v-loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  z-index 100
  padding-left 10px
  padding-right 10px
  padding-top 10px
  padding-bottom 10px
  border-radius 3px
  background-color rgba(0, 0, 0, 0.5)
</style>
